<template>
  <border :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText"
          :organType="borderConfig.organType"
          :goPageUrl="borderConfig.goPageUrl">
    <div class="leasing-resources"
         slot="module-content">
      <div class="leasing-resources--data">
        <div class="leasing-resources--data__left">
          <div class="leasing-resources--data__message">
            <message :message-name="'可租资源(万m²)'"
                     :message-number="chartData.leaseResource"
                     :message-unit="''"></message>
          </div>
          <div class="leasing-resources--data__message">
            <message :message-name="'已租资源(万m²)'"
                     :message-number="chartData.rentedOutResource"
                     :message-unit="''"></message>
          </div>
        </div>
        <div class="leasing-resources--data__right">
          <div class="leasing-resources--data__message">
            <message :message-name="'待租资源(万m²)'"
                     :message-number="chartData.forRentResource"
                     :message-unit="''"></message>
          </div>
          <div class="leasing-resources--data__message">
            <message :message-name="'时点出租率'"
                     :message-number="chartData.rentalRate + '%'"
                     :message-unit="''"></message>
          </div>
        </div>
      </div>
      <div class="leasing-resources--chart"
           ref="leasingResourcesChart"></div>
    </div>

  </border>
</template>

<script>
import Border from '@/views/components/Border.vue'
import Message from '@/views/assetsManagement/components/Message.vue'
import echarts from 'echarts'
export default {
  data () {
    return {
      borderConfig: {
        moduleType: '2x1',
        icon: '',
        titleText: '资源租赁情况'
      },
      moduleConfig: {
        isOctagon: false, // 是否需要头部的八边形
        topType: '13', // 第一层显示内容
        bottomType: '14' // 第二层显示内容
      },
      chartData: {
        leaseResource: '---',
        rentedOutResource: '---',
        forRentResource: '---',
        rentalRate: '---',
        leaseResourceDistributed: [],
        rentedOutResourceDistributed: [],
        forRentResourceDistributed: []
      },
      chart: {}
    }
  },
  mounted () {
    // this.getData()
    //   .then(res => {

    // })
  },
  methods: {
    getData () {
      return this.assetsManagementApi.typeDistributed({
        organId: this.organId
      })
        .then(result => {
          const resData = result.data
          if (+resData.code === 0) {
            this.chartData = resData.data
            this.initChart()
          }
        })
    },
    initChart () {
      this.chart = echarts.init(this.$refs.leasingResourcesChart)
      this.chart.setOption(this.getChartOpiton())
      // setInterval(() => {
      //   this.updateChart()
      // }, 5000)
    },
    updateChart () {
      this.getData()
        .then(() => {
          this.chart.setOption(this.getChartOpiton())
        })
    },
    getChartOpiton () {
      const seriesNormalConfig = {
        radius: ['22%', '44%'],
        startAngle: 210,
        label: {
          normal: {
            formatter: '{d}%',
            textStyle: {
              color: '#ffffff',
              fontSize: 14,
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            length: 10,
            length2: 10,
            lineStyle: {
              color: '#85d4f8',
              width: 1.5
            }
          }
        },
        itemStyle: {
          normal: {
            borderColor: '#000000', borderWidth: 1
          }
        },
        hoverAnimation: false,
        type: 'pie'
      }

      return {
        color: ['#0097ff', '#5d4fe6', '#00c272', '#dbda50'],
        title: [
          {
            show: true,
            text: '可租资源面积占比',
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              fontWeight: 'bold'
            },
            left: '11%',
            top: '-3%'
          },
          {
            show: true,
            text: '已租资源面积占比',
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              fontWeight: 'bold'
            },
            left: 'center',
            top: '-3%'
          },
          {
            show: true,
            text: '待租资源面积占比',
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              fontWeight: 'bold'
            },
            left: '76%',
            top: '-3%'
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{d}%'
        },
        legend: {
          icon: 'rect',
          itemWidth: 10,
          itemHeight: 10,
          left: 'center',
          top: 'bottom',
          data: this.chartData.leaseResourceDistributed.map(v => { return v.name }),
          textStyle: {
            color: '#a4b3c7'
          }
        },
        series: [
          Object.assign({}, seriesNormalConfig, {
            center: ['17.5%', '50%'],
            data: this.chartData.leaseResourceDistributed
          }),
          Object.assign({}, seriesNormalConfig, {
            center: ['50%', '50%'],
            data: this.chartData.rentedOutResourceDistributed
          }),
          Object.assign({}, seriesNormalConfig, {
            center: ['82.5%', '50%'],
            data: this.chartData.forRentResourceDistributed
          })
        ]
      }
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    }
  },
  components: {
    Border,
    Message
  }
}
</script>

<style lang="scss" scoped>
.leasing-resources {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  &--data {
    width: 100%;
    height: 31.5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &__left,
    &__right {
      width: 48%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    &__left {
      padding-left: 2%;
    }

    &__right {
      padding-right: 2%;
      justify-content: flex-end;
    }

    &__message {
      width: 36%;
      margin: 0 2%;
    }
  }

  &--chart {
    width: 100%;
    height: 68.5%;
  }
}
</style>
